<div class="bg-white px-6 pt-6 lg:px-8">
    <div class="mx-auto max-w-3xl">
        <nav class="flex" aria-label="Breadcrumb">
            <ol role="list" class="flex items-center space-x-3">
                <li>
                    <a href={Routes.website_path(@conn, :index)} class="text-gray-400 hover:text-gray-500">
                        <Icon.home class="h-5 w-5 flex-shrink-0" />
                        <span class="sr-only">Home</span>
                    </a>
                </li>
                <li class="flex items-center">
                    <Icon.slash kind="outline" class="h-5 w-5 flex-shrink-0 text-gray-300" />
                    <a href={Routes.website_path(@conn, :docs)} class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Documentation</a>
                </li>
                <%= for parent <- @page.parents do %>
                <li class="flex items-center">
                    <Icon.slash kind="outline" class="h-5 w-5 flex-shrink-0 text-gray-300" />
                    <a href={Routes.website_path(@conn, :doc, parent.path)} class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current="page"><%= parent.name %></a>
                </li>
                <% end %>
            </ol>
        </nav>
        <h1 class="mt-3 mb-6 text-4xl font-extrabold text-gray-900"><%= @page.name %></h1>
    </div>
</div>
